<html>
<head>
    <meta charset="utf-8">
    <title>Easycanvas文档</title>

    <link href="./lib/sidebar/css/jquery-accordion-menu.css" rel="stylesheet" type="text/css" />
    <link href="./lib/sidebar/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <script src="./lib/sidebar/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="./lib/sidebar/js/jquery-accordion-menu.js" type="text/javascript"></script>
</head>

<body>
    <canvas id="bgCanvas" width="400" height="800"></canvas>
    <section id="docApp"></section>

    <script id="docApp-template" type="javascript/template">
        <section>
            <header>
                <span class="title">Easycanvas</span>
                <span class="decription">数据驱动、渐进式canvas渲染库，支持浏览器端与微信小游戏，配备Chrome调试插件</span>
                <div class="github">
                    <a href="https://github.com/c-zhuo/easycanvas" target="_blank">
                    <svg height="32" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
                    </a>
                </div>
            </header>

            <!-- sidebar -->
            <div id="jquery-accordion-menu" class="sidebar jquery-accordion-menu red">
                <ul>
                    <li v-for="item in sidebar">
                        <a href="#">
                            <i v-if=0 class="fa fa-home"></i>
                            <span class="sidebar-text">{{ item.name }}</span>
                        </a>
                        <ul class="submenu">
                            <!-- 不绑定touchstart不生效，应该是和jQuery的特效冲突 -->
                            <li
                                :class="{
                                    'active': currentTitle === subitem.name
                                }"
                                v-for="subitem in item.children"
                                @click.stop.prevent="chooseTitle(subitem)"
                                @touchstart.stop.prevent="chooseTitle(subitem)">
                                <a href="#">{{ subitem.name }}</a>
                            </li>
                        </ul>
                    </li>
                </ul>

                <ul v-if=0>
                   <li class="active"><a href="#"><i class="fa fa-home"></i>Home </a></li>
                    <li><a href="#"><i class="fa fa-glass"></i>Events </a></li>
                    <li><a href="#"><i class="fa fa-file-image-o"></i>Gallery </a><span class="jquery-accordion-menu-label">
                        12 </span></li>
                    <li><a href="#"><i class="fa fa-cog"></i>Services </a>
                        <ul class="submenu">
                            <li><a href="#">Web Design </a></li>
                            <li><a href="#">Hosting </a></li>
                            <li><a href="#">Design </a>
                                <ul class="submenu">
                                    <li><a href="#">Graphics </a></li>
                                    <li><a href="#">Vectors </a></li>
                                    <li><a href="#">Photoshop </a></li>
                                    <li><a href="#">Fonts </a></li>
                                </ul>
                            </li>
                            <li><a href="#">Consulting </a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="fa fa-home"></i>系统管理 </a></li>
                    <li><a href="#"><i class="fa fa-suitcase"></i>Portfolio </a>
                        <ul class="submenu">
                            <li><a href="#">Web Design </a></li>
                            <li><a href="#">Graphics </a><span class="jquery-accordion-menu-label">10 </span>
                            </li>
                            <li><a href="#">Photoshop </a></li>
                            <li><a href="#">Programming </a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="fa fa-user"></i>About </a></li>
                    <li><a href="#"><i class="fa fa-envelope"></i>Contact </a></li>
                   
                </ul>
                <div class="jquery-accordion-menu-footer" v-show=0>
                    Footer
                </div>
            </div>
                
            <div class="content">
                <div class="content-inner" v-html="content"></div>
            </div>
            <div class="demo-transition-small"
                :class="{
                    'bg-demo': !demoVisible,
                    'demo-transition-big': demoVisible
                }"
                v-show="hasDemo"
                @click="showDemo"
            ></div>
            <div class="demo"
                v-show="demoVisible">
                <div class="demo-close" @click="hideDemo">Close</div>
                <div class="demo-code">
                    <div class="demo-update" @click="updateDemo">Run</div>
                    <div class="ace"></div>
                </div>
                <div class="demo-frame">
                    <iframe id="demo-iframe"></iframe>
                </div>
            </div>
        </section>
    </script>
</body>

<script src="./lib/ace.js"></script>
<script src="./main.js"></script>
<script async src="./lib/mode-jsx.js"></script>
<script async src="./lib/mode-html.js"></script>
<script async src="./lib/easycanvas/loader.standalone.prod.js" type="text/javascript"></script>
<script async src="./lib/babel-standalone-6.26.0.min.js" type="text/javascript"></script>

</html>
